// components/doubleSelect/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 数据数组
    list: {
      type: Array,
      value: [],
      observer(list) {
        const { titleIndex, type } = this.data
        const titleWidth = list instanceof Array
          ? list.reduce((t, c, cIndex) => {
            const len = c.name.split('').reduce((num, str) => {
              return num + (str.charCodeAt(0) > 255 ? 1 : 0.5)
            }, 0)
            return t + 88 + (type === 2 ? 12 : 0) + len * 24
          }, 0) + 30
          : 622
        this.setData({
          titleWidth,
          picList: list?.[titleIndex]?.picUrls || [],
          picUrl: list?.[titleIndex]?.picUrl,
        }, () => {
          const systemInfo = wx.getSystemInfoSync()
          // px转换到rpx的比例
          const pxToRpxScale = 750 / systemInfo.windowWidth
          const query = wx.createSelectorQuery().in(this)
          query.selectAll('.title-item').fields({
            rect: true,
            size: true,
          }, (res) => {
            if (res.length === list.length && res[titleIndex]) {
              const titleWidth = res.reduce((t, c) => t + c.width * pxToRpxScale + 20, 0)
              this.setData({
                titleWidth,
                titleScrollLeft: (res[titleIndex].left - res[titleIndex].width)
              })
            }
            console.log('元素列表', res, titleWidth)
          }).exec()
        })
      }
    },
    // 类型 1: 双向选择 2: 单向选择-绿色 3: 单向选择-蓝色
    type: {
      type: Number,
      value: 1,
    },
    // 标题选中项
    titleIndex: {
      type: Number,
      value: 0,
    },
    // 图片选中项
    picIndex: {
      type: Number,
      value: 0,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 图片列表
    picList: [],
    // 图片地址
    picUrl: null,
    // 标题总宽度
    titleWidth: 622,
    // 标题滚动宽度
    titleScrollLeft: 0,
    // 图片滚动宽度
    picScrollLeft: 0,
    // 加载
    loading: false,
    // 首次加载
    isFirst: true,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 标题点击
    titleClick(e) {
      const { list, type } = this.data
      const titleIndex = e?.currentTarget.dataset.index
      const picList = list?.[titleIndex]?.picUrls || []
      const picUrl = list?.[titleIndex]?.picUrl
      this.setData({
        titleIndex,
        picScrollLeft: 0,
        picIndex: 0,
        picList,
        picUrl,
        loading: true,
        isFirst: false,
      }, () => {
        this.setData({
          loading: false
        })
      })
      this.triggerEvent('change', {
        type: 'title',
        data: list[titleIndex],
        ...(type === 1 ? { pic: picList[0] } : {})
      })
    },
    // 图片点击
    picClick(e) {
      const { type, picList, list, titleIndex } = this.data
      const picIndex = e?.currentTarget.dataset.index
      this.setData({
        picIndex
      })
      this.triggerEvent('change', {
        type: 'pic',
        data: list[titleIndex],
        ...(type === 1 ? { pic: picList[picIndex] } : {})
      })
    },
    // 清除选中状态
    clearSelect() {
      this.setData({
        picIndex: 999999
      })
    }
  }
})
